<template>
  <div class='promotion_background' style="background-image:'../assets/img/promotion_background.jpg'">
    <!-- 顶部标题 -->
    <div class="promotion_head">
      <div class="back" @click="$router.back()">
        <img src="../assets/img/返回.png" alt="返回">
      </div>
      <p>五龙山野生动物园王国</p>
    </div>

    <!-- 二维码 -->
        <canvas class='canvas'ref='mycanvas'  :value="codeUrl" :width="300" height='460'></canvas>
         <!-- 设置宽度为500px -->
      <img :src="src" v-if="src" alt="" class="img" @touchstart.prevent="startLongPress" @touchend.prevent="endLongPress">
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import QRcode from 'qrcode'
import probg from '../assets/img/friend.jpg'


const mycanvas=ref(null)
const src =ref('')

onMounted(()=>{
  const canvas=mycanvas.value

  const ctx = canvas.getContext('2d')
  let img=new Image()
  img.src = probg;

  img.onload=()=>{
    ctx.drawImage(img,0,0,300,480)
    ctx.font = 'normal 15px 宋体'
      QRcode.toDataURL('你好')
      .then(url=>{
        let img3 = new Image();
        img3.src =url;
        img3.onload=function () {
          ctx.drawImage(img3,70,230,170,170)
          src.value = canvas.toDataURL();
        }
      })
  }
})
const longPressTimer = ref(null)

function startLongPress() {
  longPressTimer.value = setTimeout(() => {
    saveAsLocalImage()
  }, 2000) 
}

function endLongPress() {
  clearTimeout(longPressTimer.value)
}

function saveAsLocalImage() { 
  var OA =document.createElement('a')
  OA.download = '二维码'
  OA.href = src.value
  document.body.appendChild(OA)
  OA.click()
  OA.remove()
}


// // 二维码链接
// const codeUrl = ref('https://ol.woobx.cn/tool/e-muyu')

// // 二维码配置 - 控制尺寸
// const qrOptions = ref({
//   width: 200,        // 二维码宽度（像素）
//   height: 200,       // 二维码高度（像素）
//   margin: 1,         // 边距（模块数）
//   color: {
//     dark: '#000000', // 前景色
//     light: '#FFFFFF' // 背景色
//   },
//   // 其他可能的配置选项
//   // scale: 8,          // 缩放比例
//   // errorCorrectionLevel: 'H' // 纠错级别
// })

// // 引用二维码组件
// const qrRef = ref(null)
</script>

<style scoped>
.promotion_background{
  width:100vw;
  height: 100vh;
  background-color:#FFFAEC;

}

/* 顶部标题 */
.promotion_head {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
  background-color:#FFFAEC;
}

.promotion_head > p {
  margin-left: 26%;
  font-size: 14px;
  color: #000000;
}

.back {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000000;
}

.back > img {
  width: 100%;
  height: 100%;
}


/* 二维码容器 */
.qr_code {
  width: 100%;
  height: 94vh;
  display: flex;
  justify-content: center;
  align-items: center;

} 
canvas{
  display: none;
}

.img{
  width: 100%;
}

/* .qr_code > div {
  width: 80%;
  height: 50%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} */
</style>